import { useEffect } from "react";
import { useDispatch } from "react-redux";
import { OpsBlock } from "@components";
import { createAction } from "@common/utils";
import OpsItem from "./OpsItem";
import { SET_PAGE_TITLE } from "@store/global-state/action-types";
import { SAGA_USER_PROFILE_LOAD_DEFAULT_SCENARIO } from "@store/user-profile/saga-types";

const Home = () => {
  const dispatch = useDispatch();

  const PROD_MGMT = [
    {
      title: "成品入库",
      icon: "inbound",
      bgColor: "#96CF97",
      path: "/prod-inbound/source-order",
    },
    {
      title: "销售出库",
      icon: "outbound",
      bgColor: "#FCA132",
      path: "/sale-outbound/orders",
    },
    { title: "销售退库", icon: "tuiku1", bgColor: "#FE6E56" },
  ];

  const PALLET_MGMT = [
    {
      title: "临时组托",
      icon: "palletizing",
      bgColor: "#938EFB",
      path: "/tmp-pallet/list",
    },
    {
      title: "正式组托",
      icon: "palletizing",
      bgColor: "#5FCDF7",
      path: "/frm-pallet/list",
    },
    {
      title: "拆托换货",
      icon: "chaituo",
      bgColor: "#938EFB",
      path: "/unpack/list",
    },
  ];

  const WAREHOUSE_OPS = [
    {
      title: "调入",
      icon: "ruku",
      bgColor: "#96CF97",
      path: "/transfer-in/order-list",
    },
    {
      title: "调出",
      icon: "chuku",
      bgColor: "#FCA132",
      path: "/transfer-out/order-list",
    },
    {
      title: "其他入库",
      icon: "inbound",
      bgColor: "#96CF97",
      path: "/other-in/order-list",
    },
    {
      title: "其他出库",
      icon: "outbound",
      bgColor: "#FCA132",
      path: "/other-out/order-list",
    },
    {
      title: "单据移库",
      icon: "kuacangyiku",
      bgColor: "#938EFB",
      path: "/order-move/order-list",
    },
    {
      title: "直接移库",
      icon: "kuacangyiku",
      bgColor: "#5FCDF7",
      path: "/move-directly/data-list",
    },
    {
      title: "盘点",
      icon: "stocktaking",
      bgColor: "#FE6E56",
      path: "/stocktaking/order-list",
    },
  ];

  const INSPECTION = [
    { title: "来料检验", icon: "lailiaozhijian", bgColor: "#E4D6ED" },
    { title: "在库检验", icon: "jianyanxiangmu", bgColor: "#5FCDF7" },
    {
      title: "成品质检",
      icon: "chengpinzuizhongjiancejilubiao",
      bgColor: "#96CF97",
    },
    { title: "发货质检", icon: "chuhuozhijian", bgColor: "#E4D6ED" },
  ];

  const QUERY = [
    {
      title: "库内查询",
      icon: "fq_kucunchaxun",
      bgColor: "#FEADA6",
      path: "/warehouse-query/condition",
      loadDataFunc: (callback) => {
        dispatch(
          createAction(SAGA_USER_PROFILE_LOAD_DEFAULT_SCENARIO, { callback })
        );
      },
    },
  ];

  useEffect(() => {
    dispatch(createAction(SET_PAGE_TITLE, "聪友WMS"));
  }, []);

  return (
    <>
      <OpsBlock
        gap={16}
        columns={4}
        title="成品出、入库管理"
        icon="tubiao_chengpinku"
        items={PROD_MGMT}
        cmptFunc={(item) => <OpsItem item={item} />}
      />
      <OpsBlock
        gap={16}
        columns={4}
        title="原材料出、入库管理"
        icon="yuancailiaojiagong"
        items={[]}
      />
      <OpsBlock
        gap={16}
        columns={4}
        title="组托管理"
        icon="tuopan_pallet"
        items={PALLET_MGMT}
        cmptFunc={(item) => <OpsItem item={item} />}
      />
      <OpsBlock
        gap={16}
        columns={4}
        title="库内管理"
        icon="warehouse-ops"
        items={WAREHOUSE_OPS}
        cmptFunc={(item) => <OpsItem item={item} />}
      />
      <OpsBlock
        gap={16}
        columns={4}
        title="检验"
        icon="zhiliangjianyan"
        items={INSPECTION}
        cmptFunc={(item) => <OpsItem item={item} />}
      />
      <OpsBlock
        gap={16}
        columns={4}
        title="查询"
        icon="query"
        items={QUERY}
        cmptFunc={(item) => <OpsItem item={item} />}
      />
    </>
  );
};

export default Home;
